<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            background-image: url("images/clock.jpg");
            position: relative;
        }
        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0
        }
        .h {
            background-image: url("images/hour.png");
            background-repeat: no-repeat;
            background-position: center;
            transform: rotate(90deg);
        }
        .m {
            background-image: url("images/minute.png");
            background-repeat: no-repeat;
            background-position: center;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
<div class="clock" id="clock">
    <div class="h"></div>
    <div class="m"></div>
</div>

<script>
    var clock = document.getElementById('clock');
    var hPoint = clock.children[0];
    var mPoint = clock.children[1];
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    h = h>12 ? h-12:h;


    var hDeg = h* (1/12)*360;

    var mDeg = m* (1/60)*360;

    hDeg = hDeg+m*(360/(12*60))

    hPoint.style.transform = ' rotate('+hDeg+'deg)';
    mPoint.style.transform = ' rotate('+mDeg+'deg)';



    /*
    12 == 360
    (1/12) * 360
    (3/12) * 360 = 90


    30(1/60) * 360

     距离今日0:0:0 的秒数* (1/24*60*60)*360;


     ((1/12) * 360/60)   60
     60  * ((1/12) * 360/60)
     60    (360/(12*60))

     */
</script>
</body>
</html>